<template>
  <div class="buy">
    <div class="return">
      <span @click="returnVip">&lt;</span>
    </div>
    <div class="top">
      <h1>{{ className }}</h1>
      <div class="item">
        <span>无限期</span>
        <span>视频有效期</span>
      </div>
      <div class="item ques">
        <span>社群</span>
        <span>技术交流</span>
      </div>
      <div class="item Num">
        <span>103节</span>
        <span>节数</span>
      </div>
      <div class="item">
        <span>2915人</span>
        <span>学习人数</span>
      </div>
    </div>
    <div class="center">
      <div class="left">
        <span>￥69.99购买</span>
        <span>开通会员，立省0.0009元</span>
        <span>立即开通</span>
      </div>
      <div class="right">
        <span class="iconfont icon-shoucang"></span>
        <span>收藏</span>
      </div>
    </div>
    <div class="teacher">
      <div class="teacherMain">
        <div class="teachName">
          <img src="../../static/image/aa.jpg">
          <span>唐宇迪</span>
          <span>搞笑教师/培训机构讲师</span>
        </div>
        <div class="teachTitle">
          <span @click="show">王者讲师</span>
          <span class="iconfont icon-jiantou9" @click="show"></span>
        </div>
        <div class="introduce" v-if="showMask">
          <span>计算机博士，专注于机器学习与计算机视觉领域，深度学习领域一线实战讲师。在图像识别领域有着丰富经验，实现过包括人脸识别，物体识别，关键点检测等多种应用的新算法。参与多个国家级计算机视觉项目，多年数据领域培训经验，丰富的教学讲解经验，出品多套机器学习与深度学习系列课程，课程生动形象，风格通俗易懂。</span>
        </div>
      </div>
      <div class="teacherClass">
        <h2>课程亮点</h2>
        <span>掌握推荐系统原理与工作方式，使用python库进行建模。</span>
      </div>
    </div>
    <div class="teacherItem">
      <div class="listClass">
        <ul>
          <li :class="topIndex==1?'active':''" @click="changeTop(1)">
            <a href="#p1">课程大纲</a>
          </li>
          <li :class="topIndex==2?'active':''"  @click="changeTop(2)">
            <a href="#p2">课程介绍</a>
          </li>
          <li :class="topIndex==3?'active':''" @click="changeTop(3)">
            <a href="#p3">学员评价</a>
          </li>
          <li :class="topIndex==4?'active':''" @click="changeTop(4)">
            <a href="#p4">购买须知</a>
          </li>
        </ul>
      </div>
      <h2 class="KeiChen" id="p1">课程大纲</h2>
      <div class="listKC">
        <ul>
          <li>
            <div>
              <p>第一章：推荐系统工作原理</p>
              <span>&gt;</span>
            </div>
          </li>
          <li>
            <div>
              <p>第二章：使用Surprise库建立推荐系统</p>
              <span>&gt;</span>
            </div>
          </li>
          <li>
            <div>
              <p>第散章：使用Tensorflow构造隐语义模型</p>
              <span>&gt;</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="course">
      <div class="course_text">
        <h2 id="p2">课程介绍</h2>
        <p>
          <span>购买课程后，添加小助手微信（微信号：csdn500）回复【唐宇迪】</span>
        </p>
        <span>进入学习群，获取唐宇迪老师答疑</span>
        <p></p>
        <p></p>
        <p class="longText">机器学习推荐系统视频培训教程概况：课程从推荐系统在机器学习概述开始，详解推荐系统中两大核心算法：协同过滤与隐语义模型。使用Surprise库对电影数据集进行建模推荐，后使用深度学习框架Tensorflow实现一个简易的基于隐语义模型的推荐系统。</p>
      </div>
      <div class="course_people">
        <h2>适合人群</h2>
        <div>所有人</div>
      </div>
    </div>
    <div class="evaluate">
      <h2 id="p3">学员评价</h2>
      <div v-for="(index) in 8" :key="index" class="right_eva_main">
        <img src="../../static/image/aa.jpg">
        <div class="right_eva">
          <span>yu_shuyanping</span>
          <div class="right_eva_text">
            把大学数学忘光，完全没学过矩阵的我，看不太懂。决定直接看实战，不会再返回去看。
          </div>
          <span>2020-02-13 16:36</span>
        </div>
      </div>
    </div>
    <div class="buyMostKnow">
      <h2 id="p4">购买须知</h2>
      <div class="content">
        1. 课程购买后永久学习。<br>
        2. 部分课程提供答疑服务，全部课程答疑服务努力开发中。<br>
        3. 购课后课件请到电脑端课程页面下载。<br>
        4. 虚拟课程不支持退款，敬请谅解。<br>
      </div>
    </div>
    <div class="bottomMoney">
      <span>实付金额</span>
      <span>￥69.00</span>
      <div class="btn_buy" >
        <span @click="gotoshop">立即购买</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMask: false,
      topIndex: 1,
      className:''
    }
  },
  methods: {
    returnVip() {
      this.$router.push('/vip')
    },
    show() {
      if (this.showMask == false) {
        this.showMask = true
      } else {
        this.showMask = false
      }
    },
    changeTop(index) {
      this.topIndex = index
    },
    getName(){
      this.className=this.$route.params.Name
    },
    gotoshop(){
      this.$router.push({
        path:'/buycar',
        name:'buycar',
        params:{
          className:this.className
        }
      })
    }
  },
  created() {
    this.getName()
  }
}
</script>

<style scoped>
html {
  height: 100%;
  background-color: #f7f7fc;
  margin: 0;
  padding: 0;
}
ul li{
  list-style: none;
}
a{
  text-decoration: none;
}
p{
  margin: 0;
  padding: 0;
}
.return {
  height: 50px;
  font-size: 25px;
  line-height: 50px;
}
.top {
  opacity: 1;
  position: absolute;
  /*top: 0;*/
  left: 0;
  /*display: flex;*/
  justify-items: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 150px;
  background-color: cadetblue;
  text-align: center;
}
.top h1 {
  font-size: 20px;
  width: 100%;
}
.top .item {
  float: left;
  width: 25%;
  height: 55px;
  text-align: center;
}
.top .item span {
  display: inline-block;
}
.top .item span:nth-child(1) {
  font-size: 24px;
  color: white;
  font-weight: bold;
}
.top .item span:nth-child(2) {
  font-size: 17px;
  color: white;
}
.top .Num span:nth-child(2){
  display: block;
}
.center {
  position: absolute;
  top: 220px;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: white;
}
.center .left {
  margin-top: 17px;
  margin-left: 17px;
}
.center .left span:nth-child(1) {
  color: #e33e33;
  font-weight: 600;
  display: block;
  font-size: 20px;
  width: 80%;
  font-family: PingFangSC-Semibold, PingFang SC;
}
.center .left span:nth-child(2),
.center .left span:nth-child(3) {
  color: #fa0;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.center .right {
  position: absolute;
  top: 7px;
  right: 17px;
  width: 35px;

}
.center .right .iconfont {
  font-size: 35px;
}
.bottomMoney {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background-color: white;
}
.bottomMoney span:nth-child(1) {
  color: #e33e33;
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 42px;
}
.bottomMoney span:nth-child(2) {
  color: #e33e33;
  font-size: 15px;
  font-weight: 600;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 42px;
}
.bottomMoney .btn_buy {
  height: 42px;
  width: 171px;
  display: inline-block;
  text-align: center;
  background: linear-gradient(1turn, #e33e33, #f26f66);
  border-radius: 5rem;
  position: absolute;
  right: 8px;
}
.bottomMoney .btn_buy span {
  color: white;
  font-size: 18px;
  line-height: 42px;
}
.teacher {
  background-color: white;
  position: absolute;
  top: 340px;
  left: 0;
  width: 100%;
}
.teacherMain {
  background-color: rgba(254, 240, 229, .49);
  position: relative;
  top: 15px;
  width: 90%;
  left: 17px;
}
.teachTitle {
  position: absolute;
  top: 10px;
  right: 15px;
}
.teachTitle span:nth-child(1) {
  color: #997222;
  font-size: 12px;
}
.teachTitle span:nth-child(2) {
  color: #997222;
  font-size: 12px;
}
.teachName {
  padding: 10px;
}
.teachName img {
  height: 41px;
  width: 41px;
  border-radius: 50%;
}
.teachName span:nth-child(2) {
  font-size: 13px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #997222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 10px;

}
.teachName span:nth-child(3) {
  font-size: 12px;
  font-family: PingFangSC-Semibold, PingFang SC;
  color: #997222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.introduce {
  font-size: 13px;
  color: #555666;
  margin-left: 8px;
  margin-right: 8px;
}
.teacherClass {
  margin-top: 30px;
  margin-left: 17px;
  margin-right: 17px;
}
h2 {
  font-size: 19px;
  margin-left: 2px;
}
.teacherClass span:nth-child(2) {
  font-size: 14px;
}
.teacherItem{
  position: absolute;
  top: 530px;
  width: 100%;
  background-color: #fff;
  left: 0;
}
.teacherItem .listClass ul{
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
.teacherItem .listClass li{
  float: left;
  width: 25%;
  line-height:50px;
  text-align: center;
}
.teacherItem .listClass li a{
  color: #999aaa;
}
.teacherItem .listClass .active {
  border-bottom: 3px solid #e33e33;
}
.teacherItem .listClass .active a{
  color: black;
}
.KeiChen{
  margin-left: 15px;
}
.listKC ul {
  padding: 0;
}
.listKC ul li{
  height: 50px;
  border-top: 1px solid #f7f7fc;
  border-bottom: 1px solid #f7f7fc;
}
.listKC ul li p{
  display: inline-block;
  line-height: 50px;
}
.listKC ul li span{
  position: absolute;
  right: 10px;
  font-size: 20px;
  line-height: 50px;
}
.course{
  position: absolute;
  top: 830px;
  background-color: white;
  left: 0;
}
.course_text{
  width: 90%;
  margin-left: 15px;
}
.course_people{
  margin-left: 15px;
}
.course_text span{
  font-size: 13px;
}
.course_people span{
  font-size: 13px;
}
.course_text p:nth-child(4),
.course_text p:nth-child(5) {
  height: 22px;
}
.course_text>p>span{
  color: #E53333;
}
.longText{
  font-size: 13px;
}
.evaluate{
  position: absolute;
  top: 1180px;
  background-color: white;
  left: 0;
}
.evaluate img{
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.evaluate .right_eva_main{
  position: relative;
  width: 90%;
  margin-left: 15px;
  margin-top: 20px;
}
.evaluate .right_eva span:nth-child(1){
  position: absolute;
  top: 0;
  left: 50px;
}
.evaluate .right_eva span:nth-child(3){
  position: relative;
  left: 50px;
  font-size: 12px;
  color: #999aaa;
}
.evaluate .right_eva .right_eva_text{
    margin-left: 50px;
    font-size: 15px;
}

.buyMostKnow{
  position: absolute;
  top: 2400px;
  background-color: white;
  margin-bottom: 44px;
  left: 0;
}

</style>